<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.coloc-red {
				color: red;
			}
			
			.back-color {
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<img src="../1.jpg" aaa="haha" >
		<img src="../2.jpg" aaa="hehe" >
		
		<input type="checkbox" name="cb" value="1" />
		<input type="checkbox" name="cb" value="2" />
		<input type="checkbox" name="cb" value="3" />
		<button type="button">喃</button>
		<button type="button">添加背景颜色</button>
		<span>spn标签</span>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// $("img").attr("aaa", "hehe");
				console.log($("img").attr("aaa"));
				// $("img").attr("src", "../img/1.webp");
				// $("img").attr("width", 100);
				$("img").attr({"src": "../img/1.webp", "width": 100});
				
				$("span").attr("aaa", "这是JQ动态添加的内容")
				console.log($("span").attr("aaa"));
				/*	attr()
				 * 		添加自定义属性
				 * 		获取属性值
				 * 		修改属性值
				 * 			批量修改
				 */
				
				$("button").eq(0).click(function() {
					console.log($("input").prop("checked"));
					console.log($("input").attr("checked"));
					$("input").eq(0).prop("checked", true)
					$("input").eq(1).attr("checked", true)
					
					$("span").addClass("coloc-red");
				})
				
				
				$("button").eq(1).click(function() {
					// $("span").addClass("back-color");//附加
					$("span")[0].className = "back-color";//修改替换
					$("span").text("这是jq修改的内容");
				})
				
				/*	获取html元素的内容
						innerText		text()，获取值，text(修改的值)
						innerHtml		html()
						value			val()
				 * 
				 */
			});
		</script>
	</body>
</html>
